<script setup>
import {onMounted, ref} from "vue";
import {delete{{ class_name }}, get{{ class_name }}List} from "@/api/{{ table_name }}.js";
import CardArea from "@/components/cardArea.vue";
import MyTable from "@/common/myTable.vue";
import {{ class_name }}Form from "@/views/{{ table_name }}/{{ table_name }}-form.vue";
import {ElMessage, ElMessageBox} from "element-plus";

const pageData = ref({
  list: [],
  total: undefined,
})
const id = ref(undefined)
const actionFlag = ref(false)
//搜索条件
const searchData = ref({
  page: 1,
  size: 10,
})

onMounted(async () => {
  await getList()
})

const getList = async () => {
  const {data} = await get{{ class_name }}List(searchData.value)
  pageData.value = data
}

const columns = [
  {key: 'selection', type: 'selection', width: '55px'},{% for column in columns %}
  {key: '{{ column[0] }}', title: '{{ column[8] or column[0] }}'{% if column[0] == 'createdTime' or column[0] == 'updatedTime' %}, width: '220px'{% endif %}{% if column[0] == 'url' %}, type: 'img'{% endif %}{% if column[0] == 'status' %}, slot: 'status'{% endif %}},{% endfor %}
  {key: 'action', title: '操作'},
]

// 删除
const del = (id) => {
  ElMessageBox.confirm('确定删除该{{ table_comment }}吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    delete{{ class_name }}(id).then(res => {
      ElMessage.success('删除成功')
      getList()
    })
  })
}
</script>

<template>
  <!--表单操作处-->
  <el-dialog width="500" v-if="actionFlag" v-model="actionFlag" :before-close="() => {id=undefined;actionFlag = false}">
    <template #header>
      <div style="text-align: center;margin-bottom: 20px">
        <h1>{% raw %}{{ id ? {% endraw %}'编辑{{ table_comment }}'{% raw %} : {% endraw %}'新增{{ table_comment }}'{% raw %} }}{% endraw %}</h1>
      </div>
    </template>
    <{{ table_name }}-form :id="id" @success="() => {actionFlag = false;id=undefined;getList()}"/>
  </el-dialog>
  <card-area title="{{ table_comment }}管理">
    <my-table v-model:search-data="searchData" :columns="columns" :list="pageData.list" :total="pageData.total"
              @load="getList">

      <template #created>
        <el-button theme @click="actionFlag = true">新增{{ table_comment }}</el-button>
      </template>

      <template #status="{row}">
        {% raw %}<el-tag v-if="row.status === 1" type="success">启用</el-tag>
        <el-tag v-else type="danger">禁用</el-tag>{% endraw %}
      </template>

      <template #action="{row}">
        {% raw %}<el-button type="warning" plain @click="() => {id = row.id;actionFlag = true}">编辑</el-button>
        <el-button type="danger" plain @click="del(row.id)">删除</el-button>{% endraw %}
      </template>
    </my-table>
  </card-area>
</template>

<style scoped lang="scss">

</style> 